<template>
  <view class="page" @touchmove="handleMove">
    <van-nav-bar :border="false">
      <template #title>
        <view class="flex items-center">
          <img class="w-6 h-6 mr-1" src="@/static/logo.png" />
          <text class="font-semibold text-lg">问卷调查</text>
        </view>
      </template>
    </van-nav-bar>
    <view class="flex items-center justify-between p-4 bg-white">
      <view class="flex items-center text-sm">
        <image src="@/static/user.png" mode="aspectFit" class="w-4 h-4 mr-1" />
        <text>用户1</text>
      </view>

      <view class="flex items-center text-sm">
        <image src="@/static/exit.png" mode="aspectFit" class="w-4 h-4 mr-1" />
        <text class="text-primary">退出</text>
      </view>
    </view>

    <view class="px-4">
      <view class="text-base font-semibold text-center pt-5 pb-2"> 大标题 </view>
      <view class="text-sm text-black/85 mb-5">
        事实上事实上双手合十啥啥啥事实上事实上双手合十啥啥啥事实上事实上双手合十啥啥啥事实上事实上双手合十啥啥啥事实上事实上双手合十啥啥啥事实上事实上双手合十啥啥啥
      </view>
      <view v-for="i in 10" :key="i" class="mb-5">
        <view class="font-semibold mb-2 text-sm">1、你好你好你好你好你好你好你好你好</view>
        <view class="relative">
          <view
            class="border-1 border-solid border-#d1eafb text-black p-3 text-sm rounded-md mb-2 font-normal bg-gradient-to-b from-#f5fbff to-#fff"
            @click="showOptions(i)"
            >是的</view
          >

          <view
            class="absolute z-10 left-0 right-0 bg-blue-300 shadow-[0px_3px_6px_0px_rgba(97,160,241,0.1)] rounded-md overflow-hidden"
            v-if="openedSelectIndex == i"
          >
            <view
              v-for="j in 4"
              :key="j"
              class="bg-white text-sm p-3 border-0 border-b-1 border-solid border-#eaeaea"
              @click="handleSelect(i, j)"
              >是的</view
            >
          </view>
        </view>
        <view
          class="border-1 border-solid border-#d1eafb text-black p-3 text-sm rounded-md font-normal bg-gradient-to-b from-#f5fbff to-#fff"
        >
          <van-field
            rows="5"
            autosize
            type="textarea"
            placeholder="请输入留言"
            class="!bg-transparent !p-0"
          />
        </view>
      </view>

      <view class="afe-area-inset-bottom">
        <view class="btn-block bg-primary text-white" @click="handleSubmit">提交问卷</view>
      </view>
    </view>

    <view
      class="absolute bg-red-100/50 left-0 right-0 top-0 bottom-0"
      v-if="openedSelectIndex > -1"
      @tap="handleCloseMask"
      >{{ openedSelectIndex > -1 }}</view
    >

    <van-toast v-model:show="showToast">
      <template #message>
        <view class="flex items-center">
          <image src="@/static/wait.png" mode="aspectFit" class="w-4 h-4 mr-2" />
          <text>问卷还未答完哦！</text>
        </view>
      </template>
    </van-toast>

    <van-dialog v-model:show="showAlert">
      <template #title>
        <view class="flex items-center justify-center">
          <image src="@/static/success.png" mode="aspectFit" class="w-7.5 h-7.5 mr-2" />
          <text class="text-base font-medium">提交成功</text>
        </view>
      </template>
      <view class="text-base font-bold text-center my-4 font-normal">请联系您的顾问获取最佳课程方案</view>
    </van-dialog>
  </view>
</template>

<script lang="ts" setup>
  import { ref, computed } from 'vue';
  import { onShow, onLoad } from '@dcloudio/uni-app';
  import { showConfirmDialog } from 'vant';

  const form = ref({
    phone: '',
    msgCode: '',
    agree: false,
  });

  const showToast = ref(false);
  const showAlert = ref(true);

  const openedSelectIndex = ref();

  const handleCloseMask = () => {
    openedSelectIndex.value = -1;
  };

  const showOptions = (i) => {
    openedSelectIndex.value = i;
  };

  const handleSelect = () => {
    openedSelectIndex.value = -1;
  };

  const handleMove = (e) => {
    if (openedSelectIndex.value > -1) {
      e.preventDefault();
    }
  };

  const handleSubmit = () => {
    // showToast.value = true;
    showAlert.value = true;

    showConfirmDialog({
      width: 380,
      title: '标题',
      message: '确认要提交问卷吗?',
    })
      .then(() => {
        // on confirm
      })
      .catch(() => {
        // on cancel
      });
  };

  onLoad(() => {});
</script>
